<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单</title>
		<script src="js/vue.js"></script><!-- 必须先导入vue -->
		<script src="js/elementui.js"></script>
		<link rel="stylesheet" href="css/index.css" />
	</head>
	<body>
		<div id="app">
			<el-form :model="form" label-width="80px" >
				<el-row >
					<el-col  :span="8" :offset="8">
						<el-form-item label="活动名称">
							<el-input v-model="form.name"></el-input>
						</el-form-item>
						<el-form-item label="活动区域">
							<el-select v-model="form.region" placeholder="请选择活动区域">
								<el-option label="区域一" value="shanghai"></el-option>
								<el-option label="区域二" value="beijing"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="活动时间">
							<el-col :span="11">
								<el-date-picker type="date" placeholder="选择日期" v-model="form.date1"
									style="width: 100%;"></el-date-picker>
							</el-col>
							<el-col class="line" :span="2">-</el-col>
							<el-col :span="11">
								<el-time-picker placeholder="选择时间" v-model="form.date2"
									style="width: 100%;"></el-time-picker>
							</el-col>
						</el-form-item>
						<el-form-item label="即时配送">
							<el-switch v-model="form.delivery"></el-switch>
						</el-form-item>
						<el-form-item label="活动性质">
							<el-checkbox-group v-model="form.type">
								<el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
								<el-checkbox label="地推活动" name="type"></el-checkbox>
								<el-checkbox label="线下主题活动" name="type"></el-checkbox>
								<el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
							</el-checkbox-group>
						</el-form-item>
						<el-form-item>
						    <el-button type="primary" @click="onSubmit">提交</el-button>
						  </el-form-item>
					</el-col>
				</el-row>

			</el-form>
		</div>
	</body>
	<script>
		new Vue({
			el: "#app",
			data: {
				form: {
					name: "默认值",
					region: "",
					date1: "",
					date2: "",
					delivery: "",
					type:[]
				}
			},methods:{
				onSubmit(){//獲取表單的值
					alert(JSON.stringify(this.form));
					console.log(JSON.stringify(this.form));
				}
			}
		})
	</script>
</html>